<template>
  <div class="tabCenter">
    <lock-search @search="searchAction"></lock-search>
    <a-table
      :rowKey="record => record.houseId"
      :dataSource="openRecordDataList"
      :columns="columns"
      :pagination="{showSizeChanger:true, showQuickJumper:true, current:openRecordParams['page'], total:openRecordTotal, pageSize:openRecordParams['pagesize']}"
      :loading="openRecordLoading"
      @change="handleTableChange">
      <template slot="kmzt" slot-scope="text,record">
        <div>
          <span :class="colorMsg(record.kmzt)">{{ record.kmzt }}</span>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
import LockSearch from './LockSearch'
import { mapActions, mapGetters, mapMutations } from 'vuex'
const columns = [{
  title: '房号',
  dataIndex: 'fh'
}, {
  title: '开门人身份',
  dataIndex: 'kmrsf'
}, {
  title: '姓名',
  dataIndex: 'xm'
}, {
  title: '开锁方式',
  dataIndex: 'ksfs'
},
{
  title: '开门状态',
  dataIndex: 'kmzt',
  scopedSlots: { customRender: 'kmzt' }
},
{
  title: '开锁时间',
  width: '200px',
  dataIndex: 'kssj'
}]
export default {
  name: 'LockHistoryContent',
  components: {
    LockSearch
  },
  data () {
    return {
      columns
    }
  },
  computed: {
    ...mapGetters([
      'openRecordDataList',
      'openRecordParams',
      'openRecordLoading',
      'openRecordTotal',
      'userInfo',
      'STORE_ID',
      'OPERATOR_TYPE'
    ])
  },
  created () {
    const params = {}
    params.fjh = ''
    params.page = 1
    params.pagesize = 10
    params.kmrsf = ''
    params.ksrq = ''
    params.jsrq = ''
    params.kmsj = []
    this.setOpenRecordParams(params)
    this.searchAjax()
  },
  filters: {
    filterStatus (value1, value2) {
      var text = ''
      if (value2 === 1) {
        switch (value1) {
          case 1:
            text = '正常'
            break
          case 2:
            text = '异常'
            break
        }
      } else if (value2 === 2) {
        switch (value1) {
          case '1':
            text = ''
            break
          case '2':
            text = ''
            break
          case '3':
            text = ''
            break
        }
      } else if (value1 === 3) {
        text = ''
      }
      return text
    }
  },
  methods: {
    ...mapActions([
      'getOpenRecordList'
    ]),
    ...mapMutations([
      'setOpenRecordParams'
    ]),
    // 分页触发函数
    handleTableChange (pagination, filters, sorter) {
      const pager = { ...pagination }
      const params = {}
      params.page = pager.current
      params.pagesize = pager.pageSize
      this.setOpenRecordParams(params)
      this.searchAjax()
    },
    // 搜素请求函数
    searchAjax () {
      this.filterParams()
      this.getOpenRecordList(this.openRecordParams).then(res => {}).catch(() => {
        console.log('request.js统一处理错误')
      })
    },
    // 状态color切换
    colorMsg (value1) {
      let styles = ''
      switch (value1) {
        case '成功':
          styles = 'green'
          break
        case '失败':
          styles = 'red'
          break
      }
      return styles
    },
    // 点击搜素按钮
    searchAction () {
      this.searchAjax()
    },
    /* 菜单状态，参数过滤
    **/
    filterParams () {
      const params = {}
      params.hoperatorId = this.userInfo.id
      params.storesId = this.STORE_ID
      params.jylx = this.OPERATOR_TYPE
      this.setOpenRecordParams(params)
    }
  }
}
</script>
<style>
.tabCenter{margin-left: 200px;background-color:#fff;}
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}
.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}
.red{color:#F17171;}
.green{color:#4ABFA8;}
.orange{color:#F6AE35;}
.ant-table-thead > tr > th{color:#999;background:#FAFAFA}
.ant-table-pagination.ant-pagination{padding-right:10px;}
</style>
